Reimbursements

1 files changed, 31 insertions, 0 deletions

diff --git a/src/app/groups/[groupId]/reimbursement-list.tsx b/src/app/groups/[groupId]/reimbursement-list.tsx
new file mode 100644
index 0000000..9d3ec49
--- /dev/null
+++ b/src/app/groups/[groupId]/reimbursement-list.tsx
@@ -0,0 +1,31 @@
+import { Reimbursement } from '@/lib/balances'
+import { Participant } from '@prisma/client'
+
+type Props = {
+  reimbursements: Reimbursement[]
+  participants: Participant[]
+  currency: string
+}
+
+export function ReimbursementList({
+  reimbursements,
+  participants,
+  currency,
+}: Props) {
+  const getParticipant = (id: string) => participants.find((p) => p.id === id)
+  return (
+    <div className="text-sm">
+      {reimbursements.map((reimbursement, index) => (
+        <div className="border-t p-4 flex justify-between" key={index}>
+          <div>
+            <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
+            <strong>{getParticipant(reimbursement.to)?.name}</strong>
+          </div>
+          <div>
+            {currency} {reimbursement.amount.toFixed(2)}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}